<!--
 * @Author: 孙文豪
 * @Description: 新货和销售客户页面
 * @Date: 2024-03-25 15:02:04
 * @LastEditTime: 2024-06-27 17:45:12
 * @LastEditors: 孙文豪
-->
<template>
  <div class="customer-pages">
    <div class="customer-nav-box">
      <p
        class="nav-item"
        :class="{ active: activeNavCode == item.code }"
        v-for="item in customerNav"
        :key="item.code"
        @click="switchNav(item.code)"
      >
        {{ item.name }}
      </p>
      <!-- <span class="add-btn" @click="addBtnFn">添加信息</span> -->
      <el-button type="primary" class="add-btn" @click="addBtnFn"
        >添加信息</el-button
      >
    </div>
    <div class="customer-list-box">
      <div class="list-title">
        <p
          class="t-item"
          v-for="item in titleCongfig"
          :key="item.dataIndex"
          :style="{ flex: item.proportion, width: item.width }"
        >
          <span :class="{ centered: item.center }"> {{ item.name }}</span>
        </p>
      </div>
      <!-- 客户列表 -->
      <div class="list-main" v-if="activeNavCode === 'customer'">
        <div
          class="list-item"
          v-for="item in listData[activeNavCode]"
          :key="item.id"
        >
          <span class="iconfont icon-JXC-qiankuan1" v-if="item.arrears"></span>
          <div
            class="list-item-item"
            v-for="cus in customerTableConfig"
            :style="{ flex: cus.proportion, width: cus.width }"
            :key="cus.dataIndex"
          >
            <span
              v-if="cus.dataIndex !== 'operate'"
              :title="item[cus.dataIndex]"
              :class="{ centered: cus.center }"
            >
              {{
                item[cus.dataIndex] === '' ? '-' : item[cus.dataIndex] || '0'
              }}</span
            >
            <p class="d-operate" v-else @click.stop>
              <!-- 删除 -->
              <span
                class="operate-item del"
                @click.stop="deleteCustomerFn(item, 'customer')"
                >删除</span
              >
              <!-- 编辑 -->
              <span
                class="operate-item edit"
                @click.stop="editCustomerFn(item, 'customer')"
                >编辑</span
              >
            </p>
          </div>
        </div>
      </div>
      <!-- 供货商列表 -->
      <div class="list-main" v-else>
        <div
          class="list-item"
          v-for="item in listData[activeNavCode]"
          :key="item.id"
        >
          <div
            class="list-item-item"
            v-for="cus in sourceTableConfig"
            :style="{ flex: cus.proportion, width: cus.width }"
            :key="cus.dataIndex"
          >
            <span
              v-if="cus.dataIndex !== 'operate'"
              :title="item[cus.dataIndex]"
            >
              {{ item[cus.dataIndex] || '-' }}</span
            >
            <p class="d-operate" v-else @click.stop>
              <!-- 删除 -->
              <span
                class="operate-item del"
                @click.stop="deleteCustomerFn(item, 'source')"
                >删除</span
              >
              <!-- 编辑 -->
              <span
                class="operate-item edit"
                @click.stop="editCustomerFn(item, 'source')"
                >编辑</span
              >
            </p>
          </div>
        </div>
      </div>
    </div>
    <addCustomer
      v-if="isAddCustomer"
      :editObject="editCustomer"
      @close="isAddCustomer = false"
      @confirmBox="(target) => confirmCustomerFn(target, 'customer')"
    >
    </addCustomer>
    <addSource
      v-if="isAddSource"
      :editObject="editSource"
      @close="isAddSource = false"
      @confirmBox="(target) => confirmCustomerFn(target, 'source')"
    >
    </addSource>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
import addCustomer from './addCustomer.vue';
import addSource from './addSource.vue';
import { setLS, getLS } from '@/utils/common.js';

import {
  customerNav,
  sourceTableConfig,
  customerTableConfig
} from './customer.js';
export default {
  name: '',
  components: {
    addCustomer,
    addSource
  },
  setup() {
    const data = reactive({
      customerNav,
      sourceTableConfig,
      customerTableConfig,
      activeNavCode: 'customer',
      titleCongfig: customerTableConfig,
      isAddCustomer: false,
      isAddSource: false,
      listData: [], //列表数据，包含客户和供货商
      initData: {
        customer: [],
        source: []
      },
      editCustomer: null,
      editSource: null
    });
    onBeforeMount(() => {});
    onMounted(() => {
      data.listData = getLS('PURCHASE_AND_CUSTOMER') || data.initData;
    });
    const switchNav = (code) => {
      data.activeNavCode = code;
      const str = `${code}TableConfig`;
      data.titleCongfig = data[str];
    };
    const addBtnFn = () => {
      data.editCustomer = null;
      if (data.activeNavCode === 'customer') {
        data.isAddCustomer = true;
      } else {
        data.isAddSource = true;
      }
    };
    // 确认添加客户
    const confirmCustomerFn = (target, type) => {
      console.log(target);
      const index = data.listData[type].findIndex((i) => i.id === target.id);
      if (index == -1) {
        // 新增
        data.listData[type].push(target);
        Message({
          type: 'success',
          content: '添加成功'
        });
        data.queryCenter = ''; //检索内容
      } else {
        // 编辑
        data.listData[type][index] = target;
        Message({
          type: 'success',
          content: '编辑成功'
        });
      }

      setLS('PURCHASE_AND_CUSTOMER', data.listData);
    };

    // 删除
    const deleteCustomerFn = (target, type) => {
      console.log(target);
      if (target.transactionNum > 0 && type === 'customer') {
        ConfirmBox({
          title: '提示',
          content: `该客户有 ${target.transactionNum} 笔关联订单，不可删除！`
        })
          .then(() => {})
          .catch(() => {});
        return;
      }
      const delName =
        type == 'customer' ? target.customerName : target.sourceName;
      ConfirmBox({
        title: '提示',
        content: `是否删除 ${delName} 客户 ?`
      })
        .then(() => {
          // 找到删除的商品id
          const index = data.listData[type].findIndex(
            (i) => i.id === target.id
          );
          if (index !== -1) {
            // 删除后保存本地数据
            data.listData[type].splice(index, 1);
            setLS('PURCHASE_AND_CUSTOMER', data.listData);
            Message({
              type: 'success',
              content: '删除成功'
            });
          }
        })
        .catch(() => {});
    };
    // 编辑
    const editCustomerFn = (target, type) => {
      if (type === 'customer') {
        data.isAddCustomer = true;
        data.editCustomer = target;
      } else {
        data.isAddSource = true;
        data.editSource = target;
      }
    };
    return {
      deleteCustomerFn,
      editCustomerFn,
      confirmCustomerFn,
      addBtnFn,
      switchNav,
      ...toRefs(data)
    };
  }
};
</script>
<style scoped lang="less">
.customer-pages {
  position: relative;
  padding-top: 50px;
  height: 100%;
  box-sizing: border-box;
  min-width: 1200px;
  .customer-nav-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    padding-top: 10px;
    .nav-item {
      float: left;
      padding: 0px 10px;
      border: 1px solid @HSC;
      font-size: 14px;
      cursor: pointer;
      border-radius: 4px;
      line-height: 30px;
      margin-right: 10px;
      &.active {
        border: 1px solid @TSA;
        color: @TSA;
        background: @TSD;
      }
    }
    .add-btn {
      float: right;
    }
  }
  .customer-list-box {
    height: 100%;
    width: 100%;
    padding-top: 40px;
    box-sizing: border-box;
    .list-title {
      position: absolute;
      width: 100%;
      height: 40px;
      top: 50px;
      left: 0;
      background: @HSF;
      padding: 0 20px;
      box-sizing: border-box;
      font-size: 14px;
      display: flex;
      line-height: 40px;
      box-shadow: 0px 1px 0px #ccc;
      .centered {
        display: block;
        width: 100%;
        text-align: center;
      }
    }
    .list-main {
      height: 100%;
      overflow: auto;
      .list-item {
        overflow: hidden;
        height: 42px;
        line-height: 42px;
        padding: 0 20px;
        cursor: pointer;
        font-size: 14px;
        position: relative;
        display: flex;
        border-bottom: 1px solid @HSE;
        &:hover{
          background: @TSD;
        }
        .icon-JXC-qiankuan1 {
          position: absolute;
          top: -5px;
          left: 0px;
          font-size: 20px;
          color: red;
        }
        .list-item-item {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          .centered {
            display: block;
            width: 100%;
            text-align: center;
          }
        }
        .d-operate {
          display: flex;
          .operate-item {
            flex: 1;
            height: 20px;
            line-height: 20px;
            text-align: center;
            opacity: 0.6;
            margin: 10px 5px;
            color: #fff;
            border-radius: 2px;
            &.del {
              background: @REA;
            }
            &.edit {
              background: @LS;
            }
            &:hover {
              opacity: 1;
            }
          }
        }
      }
    }
  }
}
</style>
